<template>
    <div class="order-details-box">
        <div class="order-remark mar-b37">
            <div style="display: flex;justify-content: space-between">
                <span class="order-list-title">运单备注</span>
                <a class="color1989FA mar-l16" target="_blank" :href="url + '/#/order/detail/' + orderDetailData.id">更多详情</a>
            </div>
            <div class="padd-t12" v-for="item,index in orderDetailData.comment" :key="index">
                <span class="mar-r12">{{item.created_at | datereg}}</span>
                <span class="mar-r12">{{item.type_link}}备注:</span>
                <span class="color4a4a4a">[{{item.user?item.user.name:''}}] {{item.content}}</span>
            </div>
            <div class="padd-t12">
                <div style="margin-bottom: 10px">
                    <span class="add-comment" @click="showComment = !showComment">
                        <el-button type="default"><span>添加备注</span><i :class="!showComment?'el-icon-arrow-down':'el-icon-arrow-up'" style="margin-left: 6px"></i></el-button>
                    </span>
                </div>
                <div v-show="showComment">
                    <!--<div class="add-remark">-->
                        <!--<span>备注类型:</span>-->
                        <!--<span></span>-->
                    <!--</div>-->
                    <div class="add-remark">
                        <span>备注详情:</span>
                        <div>
                            <el-input type="textarea" v-model="remark" placeholder="请输入备注信息" autofocus rows="6" style="width: 468px;margin-right: 20px"></el-input>
                            <el-button type="primary" @click="addComment(orderDetailData.id)">添加</el-button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="order-base mar-b37">
            <div><span class="order-list-title">基础信息</span></div>
            <el-row class="order-base-list">
                <el-col :span='9' class="padd-t12">
                    <span class="mar-r12 ">发件账户:</span>
                    <span class="color1989FA send_name" @click="$router.push({path:'/dialog/show/common.user/' + orderDetailData.user.id})">{{orderDetailData.user?orderDetailData.user.name + ' ' + orderDetailData.user.phone:''}}</span>
                </el-col>
                <el-col :span='9' class="padd-t12"><span class="mar-r12">下单时间:</span><span class="color4a4a4a">{{orderDetailData.created_at | datereg}}</span></el-col>
                <el-col :span='6' class="padd-t12"><span class="mar-r12">当前状态:</span><span class="color4a4a4a">{{orderDetailData.status_link}}</span></el-col>
            </el-row>
            <el-row class="order-base-list">
                <el-col :span='9'   class="padd-t12"><span class="mar-r12 ">货物规格:</span><span class="color4a4a4a">{{orderDetailData.product_comment?orderDetailData.product_comment.content:''}}</span></el-col>
                <el-col :span='9'  class="padd-t12"><span class="mar-r12">重量:</span><span class="color4a4a4a">{{orderDetailData.total_weight?orderDetailData.total_weight:'0'}}kg</span></el-col>
                <!--<el-col :span='5'  class="padd-t12"><span class="mar-r12">续重:</span><span class="color4a4a4a">2kg</span></el-col>-->
            </el-row>
            <el-row class="order-base-list">
                <el-col :span='9'  class="padd-t12"><span class="mar-r12 ">叮咚码:</span><span class="color4a4a4a">{{orderDetailData.full_dingdong}}</span></el-col>
                <el-col :span='15' class="padd-t12"><span class="mar-r12">运单编号:</span><span class="color4a4a4a">{{orderDetailData.express_number}}</span></el-col>
            </el-row>
        </div>
        <div class="order-base mar-b37" v-if="orderDetailData.parent_id >= 0">
            <div>
                <span class="order-list-title">子母单</span>
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                    <i class="el-icon-question color1989FA fontsize16"></i>
                </el-tooltip>
            </div>
            <el-row class="order-base-list">
                <el-col :span='10' class="padd-t12"  >
                    <span class="mar-r12">所属母单:</span>
                    <span class="color1989FA" v-if="orderDetailData.parent_id == 0">{{orderDetailData.express_number}}(当前)</span>
                    <span class="color1989FA son-order" @click="toDetail(orderDetailData.parent_id)" v-if="orderDetailData.parent_id > 0">{{orderDetailData.parent_order?orderDetailData.parent_order.express_number:''}}</span>
                </el-col>
                <el-col :span='14' class="padd-t12">
                    <span class="mar-r12 ">子单件数:</span>
                    <span class="color1989FA" v-if="orderDetailData.parent_id == 0">
                        共<span class="color1989FA" v-if="">{{orderDetailData.children_orders?orderDetailData.children_orders.length:'0'}}</span>件
                    </span>
                    <span class="color1989FA" v-if="orderDetailData.parent_id > 0">
                        共<span class="color1989FA" v-if="">{{orderDetailData.brothers_order?orderDetailData.brothers_order.length:'0'}}</span>件
                    </span>
                </el-col>
            </el-row>
            <el-row class="order-base-list">
                <el-col :span='3' style="width: 72px;"   class="padd-t12">
                    <span>包含子单:</span>
                </el-col>
                <el-col :span="21"  v-if="orderDetailData.parent_id == 0">
                    <el-col :span='8'  class="padd-t12" v-for="item in orderDetailData.children_orders">
                        <span class="color9B9B9B" v-if="item.status < -1">{{item.express_number}}(已取消)</span>
                        <span class="color4a4a4a son-order" @click="toDetail(item.id)" v-else>{{item.express_number}}</span>
                    </el-col>
                </el-col>
                <el-col :span="21"  v-if="orderDetailData.parent_id > 0">
                    <el-col :span='8'  class="padd-t12" v-for="item in orderDetailData.brothers_order">
                        <span class="color9B9B9B" v-if="item.status < -1">{{item.express_number}}(已取消)</span>
                        <span class="color4a4a4a" v-else-if="orderDetailData.express_number == item.express_number">{{item.express_number}}(当前)</span>
                        <span class="color4a4a4a son-order" @click="toDetail(item.id)" v-else>{{item.express_number}}</span>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <div class="order-base mar-b37">
            <div><span class="order-list-title">时效信息</span></div>
            <el-row class="order-base-list">
                <el-col :span='7' class="padd-t12">
                    <span class="mar-r12 ">产品类型:</span>
                    <span class="color1989FA">{{orderDetailData.product?orderDetailData.product.title:''}}</span>
                    <el-tooltip class="item" effect="dark" content="" placement="top-start">
                        <i class="el-icon-question color1989FA fontsize16"></i>
                    </el-tooltip>
                </el-col>
                <el-col :span='9' class="padd-t12">
                    <span class="mar-r12">期望取件时间:</span>
                    <span class="color4a4a4a">
                        <span>{{orderDetailData.forecast_pickup_time | datereg}}</span>-<span v-if="orderDetailData.product">{{(orderDetailData.forecast_pickup_time_timestamp + orderDetailData.product.pick_deviation) | pickTime}}</span>
                    </span>
                </el-col>
                <el-col :span='8' class="padd-t12">
                    <span class="mar-r12">期望送达时间:</span>
                    <span class="color4a4a4a">
                        <span>{{orderDetailData.forecast_complete_time | datereg}}</span>-<span  v-if="orderDetailData.product">{{(orderDetailData.forecast_complete_time_timestamp + orderDetailData.product.delivery_deviation) | pickTime}}</span>
                    </span>
                </el-col>
            </el-row>
            <el-row class="order-base-list">
                <el-col :span='7'   class="padd-t12"><span class="mar-r12 ">当前状态:</span><span class="color009688">{{orderDetailData.status_link}}</span></el-col>
                <el-col :span='17'  class="padd-t12"><span class="mar-r12">时效评价:</span><span class="color4a4a4a">已经延期</span></el-col>
            </el-row>
        </div>
        <div class="order-send mar-b37">
            <div><span class="order-list-title">配送信息</span></div>
            <div>
                <el-row class="order-send-list">
                    <div class="order-left">
                        <div class="order-left-title">
                            <span>{{orderDetailData.pick_name}}</span>
                            <span>寄</span>
                        </div>
                        <div class="ball-left bordercolorsend">
                            <div class="ball-left-center"></div>
                        </div>
                        <div class="ball-right bordercolorsend">
                            <div class="ball-right-center"></div>
                        </div>
                        <el-row  class="order-left-content">
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">电话号码:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.pick_phone}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">取件时间:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.forecast_pickup_time}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">目的地:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.pick_address}} {{orderDetailData.pick_address_add}}</el-col>
                            </el-col>

                        </el-row>
                    </div>
                    <div class="order-center"></div>
                    <div class="order-right">
                        <div class="order-left-title">
                            <span>{{orderDetailData.delivery_name}}</span>
                            <span>收</span>
                        </div>
                        <div class="ball-left bordercolorrec">
                            <div class="ball-left-center"></div>
                        </div>
                        <div class="ball-right bordercolorrec">
                            <div class="ball-right-center"></div>
                        </div>
                        <el-row  class="order-left-content">
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">电话号码:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.delivery_phone}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">送达时间:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.forecast_complete_time}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">目的地:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.delivery_address}} {{orderDetailData.delivery_address_add}}</el-col>
                            </el-col>

                        </el-row>
                    </div>
                </el-row>
            </div>
        </div>
        <div class="order-send mar-b37" v-if="orderDetailData.order_routers">
            <div><span class="order-list-title">路由信息</span></div>
            <div>
                <div class="order-list-router">
                    <div class="order-list-lie" v-for="(item1,index1) in orderDetailData.order_routers" :key="index1">
                        <div class="order-list-lie-left">

                            <div class="order-router-box-title">
                                <div>{{item1.typeName}}</div>
                            </div>
                        </div>
                        <div class="order-router-box" v-for="(item2,index2) in item1.routers" v-if="item1.routers" :key="index2">
                            <div class="order-router-box-box">
                                <div class="order-router-box-box-title">
                                    <div class="color1989FA">[{{item2.name}}]</div>
                                    <div><a class="order-router-box-box-phone" :href="'tel:'+item2.phone">{{item2.phone}}</a></div>
                                    <!--<div v-else><a class="order-router-box-box-phone" :href="'tel:'+item2.phone">{{item2.phone}}</a></div>-->
                                    {{item2.comment}}
                                </div>
                                <div class="order-router-box-box-des">{{item2.created_at | datereg}}</div>
                            </div>
                            <div class="order-router-ball colorFF8D00">{{item2.routerType}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="order-btn">
            <el-button type="default" class="default" @click="cancelOrder(orderDetailData.id)">取消运单</el-button>
            <el-button type="primary" class="primary"  @click="changeOrder(orderDetailData.id)">修改运单</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            orderDetail: {
                type: Object | Array,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                url: '',
                showComment: false,
                remark:''
            }
        },
        computed: {
            orderDetailData: function () {
                return this.orderDetail;
            }
        },
        filters: {
            datereg(val) {
                if (val) {
                    return val.slice(5,16);
                }
            },
            pickTime(val) {
                if (val) {
                    let date = new Date(val * 1000);
                    let h = date.getHours();
                    let r = ':';
                    let m = date.getMinutes();
                    if (h < 10) {
                        h = "0" + h;
                    }
                    if (m < 10) {
                        m = "0" + m;
                    }
                    return h + r + m;
                }
            }
        },
        mounted() {
            this.url = window.location.origin;
        },
        methods: {
            addComment(id) {
                let params = {
                    order_id: id,
                    comment: this.remark
                };
                this.$http.post('express/order_comment',params)
                    .then((response) => {
                        this.$message.success('添加备注成功！');
                        this.showComment = false;
                        this.remark = '';
                        this.$store.commit('refreshDialog');
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }, // 添加备注
            cancelOrder(id) {
                this.$router.push({path:'/dialog/cancel/express.order/' + id});
            },
            changeOrder(id) {
                this.$router.push({path:'/dialog/edit/express.order/' + id});
            },
            toDetail(id) {
                this.$router.push({path:'/dialog/show/express.order/' + id});
            }
        }
    }
</script>
<style lang="less" scoped>
    .order-details-box {
        color: #000;
        line-height: 20px;
        font-size: 14px;
        padding:32px 39px 35px 44px;
        .send_name{
            cursor: pointer;
        }
        .add-remark{
            display: flex;
            span:nth-of-type(1){
                padding-right: 10px;
            }
        }
        .order-list-router{
            height: 100%;
            .order-list-lie{
                height: auto;
                padding: 2px 0 2px 80px;
                overflow: hidden;
                position: relative;
                /*display: flex;*/
                .order-list-lie-left{
                    overflow: hidden;
                    float: left;
                    height: 75px;
                    .order-router-box-title{
                        box-sizing: border-box;
                        position: absolute;
                        left: 40px;
                        top: 30px;
                        width: 42px;
                        height: 42px;
                        /*border: 2px solid #F2F2F2;*/
                        border-radius: 50%;
                        text-align: center;

                        color: #fff;
                        padding: 3px 0 0 3px;
                        div{
                            background-color: #009688;
                            border-radius: 50%;
                            width: 32px;
                            height: 32px;
                            line-height: 35px;
                            font-size:20px;
                        }
                    }
                }
                .order-router-box{
                    margin-bottom: 20px;
                    width: 232px;
                    padding: 0 10px;
                    min-height: 95px;
                    float: left;
                    background:url("../../assets/img/zuobian@2x.png") 20px center no-repeat;
                    background-size: 18px 11px;
                    position: relative;
                    .order-router-ball{
                        position: absolute;
                        top: 6px;
                        left: 18px;
                        width: 24px;
                        height: 24px;
                        text-align: center;
                        font-size: 14px;
                        line-height: 26px;
                        border-radius: 50%;
                        color: #fff;
                    }
                    .order-router-box-box{
                        text-align: center;
                        min-width: 165px;
                        height: 100%;
                        box-shadow:0px 0px 4px 0px rgba(0,0,0,0.15);
                        border-radius:2px;

                        .order-router-box-box-title{
                            font-size: 15px;
                            padding: 6px 10px 6px 28px;
                        }
                        .order-router-box-box-des{
                            color: #9B9B9B;
                            padding:0 10px 0 28px;
                        }
                        .order-router-box-box-phone{
                            color: #1989FA;
                        }
                    }
                }
            }
        }
        .add-comment:hover{
            color: #1989FA;
            cursor: pointer;
        }
        .son-order:hover{
            cursor: pointer;
        }
        .order-send{
            height: 100%;
            .order-send-list{
                margin-top: 19px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .order-center{
                    width: 90px;
                    min-height: 160px;
                    background: url("../../assets/img/fangxiang@2x.png")  center center no-repeat;
                    background-size: 27px 16px;
                }
                .order-left ,.order-right{
                    width:280px;
                    min-height: 160px;
                    position: relative;
                    box-sizing: border-box;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 3px 0px rgba(0,0,0,0.15);
                    border:1px solid rgba(95,184,120,1);
                    border-radius: 4px;
                    color:rgba(0,0,0,1);
                    .ball-left{
                        width: 17px;
                        height: 17px;
                        border-radius: 50%;
                        background-color: #fff;
                        position: absolute;
                        z-index: 10;
                        top: 24px;
                        left: -10px;
                        .ball-left-center{
                            width: 24px;
                            height: 24px;
                            background-color: #fff;
                            position: absolute;
                            overflow: hidden;
                            z-index: 12;
                            top: -4px;
                            left: -16px;
                        }
                    }

                    .ball-right{
                        width: 17px;
                        height: 17px;
                        border-radius: 50%;
                        background-color: #fff;
                        position: absolute;
                        z-index: 10;
                        top: 24px;
                        right: -10px;
                        .ball-right-center{
                            width: 24px;
                            height: 24px;
                            background-color: #fff;
                            position: absolute;
                            overflow: hidden;
                            z-index: 12;
                            top: -2px;
                            right: -16px;
                        }
                    }
                    .bordercolorsend{
                        border:1px solid rgba(95,184,120,1);
                    }
                    .bordercolorrec{
                        border:1px solid #ff8d00;
                    }
                    .order-left-title{
                        display: flex;
                        justify-content: space-between;
                        /*line-height:22px;*/
                        font-size: 16px;
                        padding: 9px 17px 4px 17px;
                        border-bottom:1px dashed rgba(238,238,238,1)
                    }
                    .order-left-content{
                        padding: 0px 17px 2px 17px;
                        .title{
                            font-size: 12px;
                            color: rgba(74,74,74,1);
                        }
                        .des{
                            font-size: 14px;
                            color: #000;
                        }
                    }
                }
                .order-right{
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 3px 0px rgba(0,0,0,0.15);
                    border:1px solid rgba(255,141,0,1);
                }
            }
        }
        .order-btn{
            text-align: center;
            .default{
                background:rgba(25,137,250,0.07);
                border-radius:4px;
                border:1px solid #009688;
                color:#009688;
                margin-right: 30px;
            }
            .primary{
                background:#009688 ;
                border:1px solid rgba(24,144,255,1);
                border-radius:4px;
                color:rgba(255,255,255,1);
            }
        }
        .mar-b37{
            margin-bottom: 32px;
        }
        .mar-l16{
            margin-left: 16px;
        }
        .padd-t12{
            padding-top: 12px;
        }
        .mar-r12{
            margin-right: 12px;
        }
        .fontsize16{
            font-size: 16px;
            margin-left: 4px;
        }
        .color4a4a4a{
            color: #4A4A4A;
        }
        .color9B9B9B{
            color: #9B9B9B;
        }
        .color009688{
            color: #009688;
        }
        .color1989FA{
            color: #1989FA;
        }
        .order-list-title{
            color: #000;
            /*font-size: 16px;*/
        }

    }
    .color4a4a4a{
        color: #4A4A4A;
    }
    .color009688{
        color: #009688;
    }
    .color1989FA{
        color: #1989FA;
    }
    .color9B9B9B{
        color: #9B9B9B;
    }
    .colorF12F1D{
        color: #F12F1D;
    }
    .colorFF8D00{
        background-color: #FF8D00;
    }
    .colorFF5722{
        background-color: #FF5722;
    }
    .color08979C{
        background-color: #08979C;
    }
    .color389E0D{
        background-color: #389E0D;
    }
</style>

